<template>

  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-menu-search mb15">
        <el-input v-model="state.keywords" size="default" placeholder="请输入姓名" style="max-width: 180px"></el-input>
        <el-button size="default" type="primary" class="ml10" @click="initTableData()">
          <el-icon>
            <ele-Search/>
          </el-icon>
          搜索
        </el-button>
        <el-button size="default" type="success" class="ml10" @click="onOpenAddDialog">
          <el-icon>
            <ele-FolderAdd/>
          </el-icon>
          添加成员
        </el-button>
      </div>
      <el-table :data="state.tableData.allData" stripe style="width: 100%">
        <el-table-column type="index" :index="1" width="50px"/>
        <el-table-column prop="id" label="学号"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100px"  show-overflow-tooltip>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-avatar style="width: 40px; height: 40px" :src="scope.row.avatar" fit="cover"/>
              <span style="margin-left: 10px">{{ scope.row.user.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="major.name" label="专业" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120px"></el-table-column>
        <el-table-column prop="user.email" label="邮箱" width="170px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="domain.name" label="研究方向" width="88px" align="center"></el-table-column>
        <!--        <el-table-column prop="homePage" label="个人主页" min-width="60px">
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                      <span style="margin-left: 10px" v-html=" scope.row.homePage "></span>
                    </div>
                  </template>
                </el-table-column>-->
        <!--        <el-table-column prop="resume" label="个人简历" show-overflow-tooltip min-width="60px">
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                      <span style="margin-left: 10px" v-html=" scope.row.resume "></span>
                    </div>
                  </template>
                </el-table-column>-->
        <el-table-column prop="job" label="工作情况" show-overflow-tooltip min-width="70px">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px" v-html=" scope.row.job||'暂无' "></span>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="good" label="优秀学员" show-overflow-tooltip min-width="60px">
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                      <span style="margin-left: 10px" v-html=" scope.row.good "></span>
                    </div>
                  </template>
                </el-table-column>
                 <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                <el-tag type="info" v-else>禁用</el-tag>
              </template>
            </el-table-column>-->
        <el-table-column prop="description" label="个人简介"></el-table-column>
        <el-table-column prop="createdAt" label="加入时间" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="225px">
          <template #default="scope">
            <el-button size="small" type="primary" @click="onOpenEditUser('edit', scope.row)">修改</el-button>
            <el-button size="small" type="primary" @click="reset(scope.row)">重置密码</el-button>
            <el-button size="small" type="danger" @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          size="small"
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="mt15"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="state.tableData.param.pageNum"
          background
          v-model:page-size="state.tableData.param.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total"
      >
      </el-pagination>
    </el-card>
    <Dialog ref="DialogRef" @refresh="initTableData()"/>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

import {deleteUser, getUserInfo, getUsers, resetPassword} from "/@/views/user/users";
import { defineAsyncComponent } from "vue";
import Axios from "/@/utils/Axios";

// 引入组件
const Dialog = defineAsyncComponent(() => import("/@/views/user/dialog.vue"));
const DialogRef = ref();



const reset = (row: any) => {
  console.log(row);
  resetPassword(row.id).then((res) => {
    console.log(123);
  });
};
const state = reactive({
  keywords: "",
  Data:[],
  tableData: {
    allData: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10
    }
  },
  editData: {}
});



// 初始化表格数据
const initTableData = async () => {
  state.tableData.loading = true;

  Axios.get("backapi/initUserMajor").then( res => {
    state.Data = res.data;
  })

  getUserInfo({
    page: state.tableData.param.pageNum,
    pageSize: state.tableData.param.pageSize,
    keywords: state.keywords,
  }).then((res) => {
    state.tableData.allData = res.data.allUser;
    state.tableData.total = res.data.total;
    state.tableData.loading = false;
  })
      .catch(() => {
        state.tableData.loading = false;
      });
};

const onOpenEditUser = (type: string, row: any,) => {
  state.editData = row.data;
  DialogRef.value.openDialog(type, row,state.Data);
};

// 删除用户
const onRowDel = (row: any) => {
  ElMessageBox.confirm(`此操作将永久删除账户："${row.user.name}"，是否继续?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
      .then(async () => {
        await deleteUser(row.id).then((res) => {
          res.success && ElMessage.success("删除成功");
        });
        initTableData();
      })
      .catch(() => {
      });
};

// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  initTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  initTableData();
};

// 页面加载时
onMounted(() => {
  initTableData();
});

const onOpenAddDialog = () => {
  DialogRef.value.openDialog(null,"add",state.Data);
};
</script>
